<template>
  <div class="project_interview_container">
    <div class="ai_container">
      <minAi url="/ai/dify/system/chat/chatMessages" />
    </div>
    <div class="projectDetailWrapper">
      <div class="projectDetailContent">
        <div class="topBox">
          <div
            class="img"
            :style="{ backgroundImage: `url(${projectData?.coverImg})` }"
          ></div>
          <div class="info">
            <div class="title">
              {{ projectData.name || '' }}
            </div>
            <div class="describe" v-html="renderMarkDown(projectData.describe || '')"></div>
            <div
              class="customBtn"
              @click="handleClick({ name: '项目链接' })"
              v-if="projectData.template == 0 && projectData.resultLink"
            >
              <img src="@/assets/link.png" alt="" />
              {{ t('projectDetail','项目成果链接') }}
            </div>
          </div>
        </div>
        <div class="content">
          <div
            class="subTitle"
            v-if="
              projectData.template == 0 &&
              projectData.newProjectResultFileList &&
              projectData.newProjectResultFileList.length
            "
          >
            <img src="@/assets/titleIcon.png" alt="" />
            {{ t('projectDetail','项目成果展示') }}
          </div>
          <div
            v-if="
              projectData.template == 0 &&
              projectData.newProjectResultFileList &&
              projectData.newProjectResultFileList.length
            "
          >
            <a-carousel arrows>
              <template #prevArrow>
                <div
                  class="custom-slick-arrow"
                  style="
                    left: 10px;
                    z-index: 1;
                    font-size: 30px;
                    color: #d2ccdd;
                  "
                >
                  <LeftCircleOutlined />
                </div>
              </template>
              <template #nextArrow>
                <div
                  class="custom-slick-arrow"
                  style="right: 20px; font-size: 30px; color: #d2ccdd"
                >
                  <RightCircleOutlined />
                </div>
              </template>
              <div
                class="imagesBox"
                v-for="(item, index) in projectData.newProjectResultFileList"
              >
                <div class="img">
                  <img
                    :src="item[0]?.fileUrl"
                    @click.stop=";(visible = true), (current = index * 2 + 0)"
                  />
                </div>
                <div class="img">
                  <img
                    :src="item[1]?.fileUrl"
                    @click.stop=";(visible = true), (current = index * 2 + 1)"
                  />
                </div>
              </div>
            </a-carousel>
          </div>

          <div class="subTitle">
            <img src="@/assets/titleIcon.png" alt="" />
            {{ t('projectDetail','项目岗位') }}
          </div>
          <div class="projectJobBox">
            <div
              class="item"
              v-for="(item, i) in projectData.projectJobCardVOList"
              @click="() => jobClick(item, i)"
            >
              <div class="name">{{ item.name }}</div>
              <div class="skill">{{ t('projectDetail','技能要求') }}:{{ item.skill }}</div>
              <div style="display: flex; align-items: center;flex-wrap:wrap; margin-top: 9px">
                <div class="requiredNum" style="margin-right: 10px;margin-bottom:5px"
                  >{{t('projectPositions','共招')}}：{{ item.requiredNum || '' }} {{ t('projectPositions','人') }}</div
                >
                <div style="margin-bottom:5px"
                  :class="{ notfilled: item.isFull === 0 }"
                  class="toBeRecruitedNum"
                  >{{t('projectPositions','待招')}}：<span>{{ item.vacancyNum }}</span
                  > {{ t('projectPositions','人') }}</div
                >
              </div>

              <a-button
                style="margin-top: 10px"
                :disabled="isCheckedJob == 'false'"
                v-if="
                  projectData.template != 1 &&
                  projectData.registrationStatus == 1 &&
                  projectData.recruitStatus != 1 &&
                  projectData.vacancyNum!=0 &&
                  !isTeacher() 
                "
                type="primary"
                @click="toApply(item, i)"
                >{{ t('projectDetail',"应聘") }}
              </a-button>
            </div>
          </div>
          <div class="subTitle">
            <img src="@/assets/titleIcon.png" alt="" />
            {{ t('projectDetail',"主指导老师") }}
          </div>
          <div class="teacherBox">
            <div class="teacherItem">
              <img src="@/assets/user.png" :alt="t('projectDetail','项目图片')" />
              <div>
                <div>{{ projectData?.mainTeacher?.name }}</div>
                <div
                  style="
                    margin-top: 4px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #333333;
                  "
                  >{{ t('projectDetail','专业') }}：{{
                    projectData?.mainTeacher?.orientation || t('common','暂无数据')
                  }}</div
                >
              </div>
            </div>
          </div>

          <div class="subTitle" v-if="projectData?.coTeacherList?.length">
            <img src="@/assets/titleIcon.png" alt="" />
            {{ t('projectDetail','副指导老师') }}
          </div>
          <div class="teacherBox">
            <div
              class="teacherItem"
              v-for="item in projectData?.coTeacherList"
              :key="item.id"
            >
              <img src="@/assets/user.png" alt="头像" />
              <div>
                <div>{{ item.name }}</div>
                <div
                  style="
                    margin-top: 4px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #333333;
                  "
                  >{{ t('projectDetail','专业') }}：{{ item.orientation || t('common','暂无数据') }}</div
                >
              </div>
            </div>
          </div>

          <div class="subTitle">
            <img src="@/assets/titleIcon.png" alt="" />
            {{ t('projectDetail','详细信息') }}
          </div>
          <div class="group">
            <div class="item">
              <div class="cell">
                <div class="label">{{ t('projectDetail','所属年级') }}</div>
                <div class="value">{{ projectData.grade || t('common','暂无数据') }}</div>
              </div>
              <div class="cell">
                <div class="label">{{ t('projectDetail','所属班级') }}</div>
                <div class="value">{{
                  formatClass(projectData.gradeClassList) || t('common','暂无数据')
                }}</div>
              </div>
              <div class="cell">
                <div class="label">{{ t('projectDetail','项目难度') }}</div>
                <div class="value">
                  <a-rate
                    :value="projectData.difficulty"
                    disabled
                    style="font-size: 14px"
                /></div>
              </div>
              <div class="cell">
                <div class="label">{{ t('projectDetail','项目类型') }}</div>
                <div class="value">{{ projectData.categoryName || t('common','暂无数据')}}</div>
              </div>
              <div class="cell">
                <div class="label">{{ t('projectDetail','项目模板') }}</div>
                <div class="value">{{
                  projectData.template == 1 ? t('projectDetail','多组协作') : t('projectDetail','经典')
                }}</div>
              </div>
            </div>
            <div class="item">
              <div class="cell" v-if="projectData.template == 1">
                <div class="label">{{ t('projectDetail','小组人数设置') }} | {{ t('projectDetail','成员总数') }}</div>
                <div class="value"
                  >{{ projectData.groupMemberLimit }} |
                  {{ projectData.totalMemberLimit }}</div
                >
              </div>
              <div class="cell" v-else>
                <div class="label">{{ t('projectDetail','成员总数') }}</div>
                <div class="value">{{ projectData.totalMemberLimit || t('common','暂无数据') }}</div>
              </div>
              <div class="cell">
                <div class="label">{{ t('projectDetail','开发模型') }}</div>
                <div class="value">{{ projectData.devModelName|| t('common','暂无数据') }}</div>
              </div>
              <div class="cell">
                <div class="label">{{ t('projectDetail','课程') }}</div>
                <div class="value">{{
                  formatCourse(projectData.courseList)
                }}</div>
              </div>

              <div class="cell">
                <div class="label">{{ t('projectDetail','项目周期') }}</div>
                <div class="value"
                  >
                  {{ formatDate(projectData.startTime) }}~ {{
                    formatDate(projectData.endTime)
                  }}
                  <!-- {{ projectData.startTime }}—{{projectData.endTime}} -->
                  </div
                >
                <!-- <div class="value">{{projectData.startTime || ''}} 至 {{projectData.endTime || ''}}</div> -->
              </div>
              <!-- <div class="cell">
                <div class="label">报名时间</div>
                <div class="value">{{projectData.registrationStartTime || ''}} 至 {{projectData.registrationEndTime || ''}}</div>
              </div> -->
              <div class="cell">
                <div class="label">{{ t('projectDetail','报名状态') }}</div>
                <div class="value">{{
                  signUpStatusLabel[projectData.registrationStatus] || t('common','暂无数据')
                }}</div>
              </div>
            </div>
            <div class="item">
              <div class="cell">
                <div class="label">{{ t('projectDetail','评分标准') }}</div>
                <div
                  class="value"
                  v-html="projectData.scoreStandard || t('common','暂无数据')"
                ></div>
              </div>
            </div>
            <div class="item">
              <div class="cell">
                <div class="label">{{ t('projectDetail','项目目标') }}</div>
                <div class="value"
                  ><div v-html="projectData.target || t('common','暂无数据')"></div
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="buttonGroup">
        <div
          v-if="
            projectData.template == 1 &&
            projectData.registrationStatus == 1 &&
            projectData.recruitStatus != 1 &&
            !isTeacher()
          "
          style="gap: 20px; display: flex; flex-direction: column"
        >
          <div
            class="button"
            @click="toJoinGroup"
            :disabled="isCheckedJob == 'false'"
            >{{ t('projectDetail','加入小组') }}</div
          >
          <div
            class="button"
            @click="toCreateGroup"
            :disabled="isCheckedJob == 'false'"
            >{{ t('projectDetail','创建小组') }}</div
          >
        </div>
      </div>
    </div>

    <a-modal
      v-model:open="isCreateGroupOpen"
      :title="t('projectDetail','创建小组')"
      @ok="createGroup"
      :okText="t('projectDetail','创建')"
      @cancel="
        () => {
          groupName = ''
          myJob = undefined
        }
      "
    >
      {{ t('projectDetail','组名') }}：<a-input
        v-model:value="groupName"
        :placeholder="t('projectDetail','请输入小组名称')"
        style="width: 100%; margin-top: 5px"
      />
      <div style="margin: 20px 0">
        {{ t('projectDetail','请选择你在小组的职位') }}：<a-select
          ref="select"
          style="width: 100%; margin-top: 5px"
          v-model:value="myJob"
          :options="projectData.projectJobCardVOList"
          :field-names="{ label: 'name', value: 'projectJobId' }"
          :placeholder="t('projectDetail','请选择职位')"
          @focus="focus"
          @change="handleChange"
        ></a-select>
      </div>
    </a-modal>

    <a-modal
      v-model:open="isJoinGroupOpen"
      :title="t('projectDetail','加入小组')"
      @ok="joinGroup"
      :okText="t('projectDetail','加入')"
      @cancel="
        () => {
          myGroupID = ''
          myJob = undefined
        }
      "
    >
      {{ t('projectDetail','小组ID') }}：<a-input
        v-model:value="myGroupID"
        :placeholder="t('projectDetail','请输入小组ID')"
        style="width: 100%; margin-top: 5px"
      />
      <div style="margin: 20px 0">
        {{ t('projectDetail','请选择你在小组的职位') }}：<a-select
          ref="select"
          style="width: 100%; margin-top: 5px"
          v-model:value="myJob"
          :options="projectData.projectJobCardVOList"
          :field-names="{ label: 'name', value: 'projectJobId' }"
          :placeholder="t('projectDetail','请选择职位')"
          @focus="focus"
          @change="handleChange"
        ></a-select>
      </div>
    </a-modal>
   
  </div>
  <a-image-preview-group
      v-if="visible"
      :preview="{ visible, onVisibleChange: () => (visible = false), current }"
    >
      <a-image
        v-for="item in projectData.projectResultFileList"
        :width="200"
        :style="{ display: 'none' }"
        :src="item.fileUrl"
      />
    </a-image-preview-group>
</template>

<script setup>
import { isTeacher } from '@/stores/info'

import { ref, reactive, onMounted, watch } from 'vue'
import AIConsulting from '@/components/AIConsulting.vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { h } from 'vue'
import { useRoute } from 'vue-router'
import { getProjectMessage, joinProject } from '@/request/projectSquare.js'
import {
  studentCreateGroup,
  studentJoinGroup,
} from '@/request/process/studentMember.js'
import MarkdownIt from 'markdown-it'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
import minAi from '@/components/common/minAi.vue'
import { t } from '@/i18n'
const renderMarkDown = (text) => {
  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
  })
  return md.render(text).replace(/<a\s+[^>]*?(?!target=)([^>]*>)/g, function(match, p1) {
    return `<a target="_blank" ${p1}`;
  })
}
const formatCourse = (courseList) => {
  if (!courseList) return ''
  return courseList.map((item) => item.courseName).join('，')
}
const formatClass = (gradeClassList) => {
  if (!gradeClassList) return ''
  return gradeClassList.map((item) => item.gradeClassName).join('，')
}

const visible = ref(false)
const current = ref(0)
const route = useRoute()
const md = new MarkdownIt()

//markdown渲染
function markdownIt() {
  const md = new MarkdownIt()
  console.log(projectData)
  console.log(projectData.name)
  if (projectData.describe && projectData.describe.includes('###')) {
    projectData.describe = md.render(projectData.describe)
  }
  if (projectData.scoreStandard && projectData.scoreStandard.includes('###')) {
    projectData.scoreStandard = md.render(projectData.scoreStandard)
  }
  if (projectData.target && projectData.target.includes('###')) {
    projectData.target = md.render(projectData.target)
  }
}

onMounted(async () => {
  const id = route.query.id
  let res = await getProjectMessage(id)
  for (let key in res.data) {
    if (typeof res.data[key] == 'string') {
      projectData[key] = `${res.data[key]}`.trim() || t('common','暂无')
    } else {
      projectData[key] = res.data[key]
    }
  }
  projectData['newProjectResultFileList'] =
    res?.data?.projectResultFileList?.reduce((acc, curr, index) => {
      if (index % 2 === 0) {
        // 每两个元素创建一个新数组
        acc.push([curr, res?.data?.projectResultFileList[index + 1]])
      }
      return acc
    }, [])
  console.log(res)
  markdownIt()
})
let projectData = reactive({})
let activeJobIndex = ref(-1)
let activeJobItem = reactive({})

let isCheckedJob = ref()
watch(
  () => route.query.isCheckedJob,
  (newVal) => {
    isCheckedJob.value = newVal
    console.log('isCheckedJob', isCheckedJob.value)
  },
  {
    immediate: true,
  }
)

function jobClick(item, i) {
  if (!isCheckedJob.value) {
    activeJobIndex.value = -1
    activeJobItem = {}
    return
  }

  if (item.isFull == 1) {
    activeJobIndex.value = -1
    activeJobItem = {}
    return
  }
  activeJobIndex.value = i
  activeJobItem = item
  console.log('activeJobItem', activeJobItem)
}

function toApply(item, i) {
  Modal.confirm({
    title: t('projectDetail','确认加入'),
    icon: createVNode(ExclamationCircleOutlined),
    content: h('div', {}, [
      h(
        'div',
        {
          style: 'margin-bottom:6px',
        },
        `${t('projectDetail','您确认加入')} ${projectData.name} ${t('projectDetail','项目')}-${item.name} ${t('projectDetail','岗位')}?`
      ),
    ]),
    style: {
      width: '430px',
    },
    async onOk() {
      try {
        let res = await studentJoinGroup({
          projectJobId: item.projectJobId,
        })
        console.log('加入项目', res)
        if (res) {
          message.success(t('projectDetail','加入成功'))
        } else {
          message.error(t('projectDetail','加入失败'))
        }
      } catch {
        message.error(t('projectDetail','加入失败'))
      }
    },
    onCancel() {},
  })
}

//创建小组
let isCreateGroupOpen = ref(false)
let isJoinGroupOpen = ref(false)
let myJob = ref(undefined)
let groupName = ref(undefined)

function toCreateGroup() {
  isCreateGroupOpen.value = true
}

function toJoinGroup() {
  isJoinGroupOpen.value = true
}

async function createGroup() {
  console.log('createGroup', {
    name: groupName.value,
    projectJobId: myJob.value,
  })

  let res = await studentCreateGroup({
    name: groupName.value,
    projectJobId: myJob.value,
  })
  console.log('创建', res)
  isCreateGroupOpen.value = false
  myJob.value = undefined
  groupName.value = undefined
  if (!res || res.code != 200) {
    message.error(t('projectDetail','创建失败'))
    return
  }
  Modal.success({
    title: t('projectDetail','创建成功'),
    content: h('div', {}, [
      h(
        'p',
        {
          style: {
            'margin-bottom': '10px',
            'font-weight': 'bold',
            color: 'red',
            'font-size': '28px',
            display: 'flex',
            'algin-items': 'center',
            'justify-content': 'center',
          },
        },
        `${res.data}`
      ),
      h('p', t('projectDetail','请截图保存小组ID，不要外泄')),
      h('p', t('projectDetail','您的同伴点击加入小组，输入小组ID即可加入该组')),
    ]),
  })
}

let myGroupID = ref(undefined)

async function joinGroup() {
  if (!myJob.value) {
    message.error(t('projectDetail','请选择岗位'))
    return
  }
  if (!myGroupID.value) {
    message.error(t('projectDetail','请填写小组ID'))
    return
  }
  let res = await studentJoinGroup({
    teamId: myGroupID.value,
    projectJobId: myJob.value,
  })
  console.log('createGroup', myJob.value, myGroupID.value)
  console.log('创建', res)
  isJoinGroupOpen.value = false
  myGroupID.value = undefined
  myJob.value = undefined

  if (res.code != 200) return
  Modal.success({
    title: t('projectDetail','加入成功'),
  })
}

//项目日期处理
function formatDate(dateString) {
  // 将输入的字符串转换为 Date 对象
  const date = new Date(dateString)

  // 获取年份、月份和日期
  const year = date.getFullYear()
  const month = date.getMonth() + 1 // 月份从0开始，需要加1
  const day = date.getDate()
  // console.log('date',date)
  // 返回格式化后的字符串
  return `${year}/${month}/${day}`
}

let signUpStatusLabel = [t('control','未开始'), t('control','招募中'), t('control','已截止')]

</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
@import '@/styles/public.scss';
$aiContainerWidth: 30%;
$aiContainerHeight: 100%;
$aiContainerMarginRight: 15px;
$aiContainerFontSize: 12px;
$projectNameHeight: 50px;
$messageContainerPaddingTop: 15px;
$messageContainerPaddingRight: 20px;
.project_interview_container {
  margin: 20px 0;
  display: flex;
  width: $viewMinWidth;
  .ai_container {
    width: $aiContainerWidth;
    min-width: $aiContainerWidth;
    height: $aiContainerHeight;
    margin-right: $aiContainerMarginRight;
    /* padding:30px 0; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    font-size: $aiContainerMarginRight;
    /* margin: auto 0; */

    /* cursor: not-allowed; //不能点击的效果 */
    /* color: #cfd0d3; //置灰的颜色 */
    /* margin:calc((100% - #{ $aiContainerHeight})/2) 0; */
  }
}
</style>

<style lang="scss" scoped>
.projectDetailWrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.projectDetailContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* padding: 20px; */
  color: #333;
  background: #ffffff;
  border-radius: 10px;
  overflow-y: auto;
  .topBox {
    padding: 20px 20px 0 20px;
    display: flex;
    width: 100%;
    min-height: 208px;
    .img {
      width: 360px;
      max-height: 210px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #f5f5f5;
      background-size: cover;
      background-position: center;
      border-radius: 10px;
      overflow: hidden;
      margin-right: 24px;
    }
    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      width: 100%;
      height: 210px;

      .title {
        width: 100%;
        font-weight: 500;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.85);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .status {
          padding: 7px 13px;
          background: #f1bf46;
          border-radius: 13px;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          margin-left: 12px;
        }
      }

      .describe {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 1.5;
        word-break: break-all;
        overflow: auto;
        width: 100%;
      }
      .customBtn {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 5px 8px;
        font-weight: 400;
        font-size: 14px;
        color: #6d68ee;
        background: #eeeeff;
        border-radius: 4px;
        img {
          margin-right: 6px;
          height: 10px;
        }
      }
    }
  }

  .content {
    min-width: 0;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;

    .subTitle {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      img {
        width: 14px;
        margin-right: 8px;
      }
    }
    .projectJobBox {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      .item {
        min-width: 180px;
        width: 22.5%;
        padding: 12px 15px;
        background: #ffffff;
        box-shadow: 0px 2px 7px 0px #e3e2ff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        word-break: break-word;

        .name {
          font-weight: 500;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
        }
        .skill {
          margin-top: 9px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
        .toBeRecruitedNum {
          font-weight: 500;
          font-size: 12px;
          color: #8466f5;
        }
        .requiredNum {
          font-weight: 400;
          font-size: 12px;
          color: #b5acce;
        }
      }
    }
    .teacherBox {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      .teacherItem {
        width: 200px;
        background: #ffffff;
        box-shadow: 0px 2px 7px 0px #e3e2ff;
        border-radius: 6px;
        display: flex;
        align-items: center;
        padding: 12px;
        img {
          width: 45px;
          margin-right: 10px;
        }
      }
    }
    .group {
      display: flex;
      flex-direction: column;
      .item {
        display: flex;
        width: 100%;
        padding: 17px 27px;
        margin-bottom: 16px;
        background: #f7f7ff;
        border-radius: 8px;
        .cell {
          display: flex;
          flex-direction: column;
          min-width: 20%;
          padding: 0 5px;
          .label {
            font-weight: 500;
            font-size: 14px;
            color: rgba(119, 106, 156, 0.85);
          }
          .value {
            font-weight: 500;
            margin-top: 6px;
            line-height: 1.5;
            font-weight: 500;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }
  }
}
.buttonGroup {
    min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .button {
    text-wrap: nowrap;
    padding: 8px 12px;
    background: #8466f5;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      background: white;
      color: #8466f5;
    }
  }
}

.imagesBox {
  width: 100%;
  height: 200px;
  display: flex !important;
  justify-content: space-around;
  align-items: center;
  .img {
    width: 50%;
    /* border: 1px solid #d7d2e2; */
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      cursor: pointer;
      max-height: 100%;
      max-width: 100%;
    }
  }
}
:deep(.ant-carousel) {
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: fit-content;
}
:deep(.slick-slide) {
  min-width: 0;
  text-align: center;
  height: 100%;
  line-height: 160px;
  background: #ecf3fe;
  overflow: hidden;
}
:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  transition: ease all 0.3s;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}
:deep(.slick-slide h3) {
  color: #fff;
}
</style>
